<template>
  <div class="table-box">
    <div v-show="editAble">
      <edit ref="editRef" @on-success="fetchTableData" @show-list="handleShowList" />
    </div>
    <div v-show="viewAble">
      <detail ref="infoRef" @show-list="handleShowList" />
    </div>
    <div v-show="listAble" class="table-box">
      <KingTable ref="kingTable" :tableOptions="_tableOptions">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <span></span>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <TableRowBtns :row="scope.row" :delShow="false" @handle-row-action="handleBtnAction" />
        </template>
      </KingTable>
    </div>
  </div>
</template>

<script setup lang="tsx" name="GroupMenuList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import TableRowBtns from "@/components/KingTable/components/TableRowBtns.vue";
import { operateType } from "@/plugins/commonType.enum";
import edit from "./components/groupMenuEdit.vue";
import detail from "./components/groupMenuView.vue";

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

const editAble = ref(false);
const viewAble = ref(false);
const listAble = ref(true);
const infoRef = ref();
const editRef = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1 });

// 表格配置项
const _tableCols = [
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "nodecode",
    label: "机构代码",
    width: 180
  },
  {
    prop: "nodename",
    label: "机构名称",
    width: 180
  },
  {
    prop: "type",
    label: "机构类型",
    dictCode: "OrgType",
    width: 100
  },
  {
    prop: "memo",
    label: "机构描述",
    overflow: true
  },
  { prop: "operation", label: "操作", fixed: "right", width: 260 }
];

const _searchCols = [
  {
    prop: "LIKE_nodecode",
    label: "机构代码",
    width: 100,
    el: "input"
  },
  {
    prop: "LIKE_nodename",
    label: "机构名称",
    width: 100,
    el: "input"
  }
];

const _tableOptions = {
  title: "企业授权",
  queryUrl: "system/org/groupQuery",
  operUrl: "system/org",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: //新增操作
      break;
    case operateType.EDIT: //编辑操作
      listAble.value = false;
      viewAble.value = false;
      editAble.value = true;
      editRef.value.showData(row);
      break;
    case operateType.DETAIL: //查询操作
      listAble.value = false;
      viewAble.value = true;
      editAble.value = false;
      infoRef.value.showData(row);
      break;
  }
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

const handleShowList = () => {
  listAble.value = true;
  viewAble.value = false;
  editAble.value = false;
};
</script>
